﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <meta charset="utf-8" />
    <style>
        .text{ text-align:center}
        tr.change:hover {
            background-color: lightblue;
        }
        td {
            text-align: center; /*设置水平居中*/
            vertical-align: middle; /*设置垂直居中*/
        }
          th {
            text-align: center; /*设置水平居中*/
            vertical-align: middle; /*设置垂直居中*/
        }
          .ni{
              /* background-color:darkgrey;*/
          }
    </style>
</head>
<body ng-app="myApp">
    <table class="table" ng-controller='MainController'>
        <thead>
            <tr>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>购买数量</th>
                <th>产品单价</th>
                <th>产品总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in productlist" ng-class="{ni: !$odd}" class="change">
                <td>{{product.id}}</td>
                <td>{{product.name}}</td>
                <td><input type="button" class="btn btn-default" value="-" ng-click="minus(product)" />
                <input type="number" class="text" ng-model="product.buycount" size="3" /> 
                    <input type="button" class="btn btn-default" value="+" ng-click="add(product)" /></td>
                <td>{{product.buyprice}}</td>
                <td>{{product.buycount*product.buyprice}}</td>
                <td><input type="button" class="btn btn-default" ng-click="removeproduct(product)" value="移出" /></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td >商品总数:{{sumbuycount()}}</td>
                <td></td>
               
                <td >总价格:{{sumbuyprice()}}</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
<script>
    angular.module('myApp', [])
    .controller('MainController', function ($scope) {


        $scope.productlist = [{
            id: "1",
            name: "苹果",
            buycount: 1,
            buyprice: 45
        }, {
            id: "2",
            name: "香蕉",
            buycount: 2,
            buyprice: 23
        }, {
            id: "3",
            name: "榴莲",
            buycount: 10,
            buyprice: 15
        }, {
            id: "4",
            name: "梨子",
            buycount: 20,
            buyprice: 77
        }, {
            id: "5",
            name: "火龙果",
            buycount: 30,
            buyprice: 23
        }, {
            id: "6",
            name: "橘子",
            buycount: 1,
            buyprice: 52
        }, {
            id: "7",
            name: "石榴",
            buycount: 1,
            buyprice: 7
        }]

        $scope.sumbuycount = function () {
            var sumbuycount = 0;
            angular.forEach($scope.productlist, function (item) {
                sumbuycount += item.buycount;
            });
            return sumbuycount;
        }

        $scope.sumbuyprice = function () {
            var sumbuyprice = 0;
            angular.forEach($scope.productlist, function (item) {
                sumbuyprice += item.buyprice;
            });
            return sumbuyprice;
        }

        $scope.minus = function (product) {

            var name = product.name;
            if (product.buycount - 1 == 0) {
                if (window.confirm('你确定要删除' + name + '该产品吗？')) {
                    $scope.removeproduct(product);
                }
            }
            if (product.buycount - 1 > 0) { product.buycount -= 1; }
           
        }
        $scope.add = function (product) {
            product.buycount += 1;
        }

        $scope.removeproduct = function (product) {
            var index = $scope.productlist.indexOf(product);
            $scope.productlist.splice(index, 1);
        }
    }

);

</script>
